<template>
  <div class="StandbyStudents">
    <!-- 搜索表头导航 -->
    <NavSearch ref="navSearch"
               isShowType
               :pickerOpt="searchOpt"
               :type="searchType"
               place="学员姓名/身份证号"
               :setDefaultType="'姓名'"
               @changSearchVal="searchVal = $event"
               @changeType="searchType = $event"
               @searchHandle="ajaxGetData(true)" />
                 <!-- 客户选择 -->
    <SelectBar :selectList="selectList"
               @select="handleSelect" />
    <!-- 内容渲染 -->
    <van-list v-model="isLoading"
              class="pb80"
              :finished="isFinished"
              :immediate-check="false"
              finished-text="没有更多数据了"
              @load="ajaxGetData">
      <StandbyStudentsDetail v-for="(item, index) in StandbyStudents"
                        :key="index"
                        :info="item"
                        :showaffirmBtn="showaffirmBtn"
                        :chooseStudentInfo="chooseStudentInfo"
                        />
    </van-list>
  </div>
</template>

<script type="text/ecmascript-6">
import SelectBar from '@/components/SelectBar'

import StandbyStudentsDetail from './components/StandbyStudentsDetail'

import PagePart from '@/mixins/PagePart'

export default {
  components: { SelectBar, StandbyStudentsDetail },
  mixins: [PagePart],
  data () {
    return {
      searchVal: '',
      searchType: '',
      searchParams: {},
      StandbyStudents: [],
      showaffirmBtn: false,
      chooseStudentInfo: {},
      curTab: null,
      // 精确搜索时异常处理
      isShowError: false,
      errorRes: {},

      searchOpt: {
        title: '类型',
        columns: [
          { value: 'name', text: '姓名' },
          { value: 'idCard', text: '身份证' }
        ]
      },
      selectList: [ // 顶部sele
        { title: '政策类型', key: 'policyType', remoteKey: 'policy_type' },
        { title: '报考车型', key: 'drivingLicense', remoteKey: 'driving_license' }
      ]
    }
  },
  created () {
    this.ajaxGetData(true)
  },
  mounted () {
    console.log('mounted', this.$route.params)
    let arr = Object.keys(this.$route.params)
    if (arr.length > 0) {
      this.showaffirmBtn = true
      this.chooseStudentInfo = this.$route.params.studentInfo
    } else {
      this.showaffirmBtn = false
      this.chooseStudentInfo = {}
    }
  },
  methods: {
    handleSelect (newSearchParams) {
      this.searchParams = this.deepCopy(newSearchParams)
      this.ajaxGetData(true)
    },
    // 清空搜索
    errorCancelHandle () {
      this.errorRes = {}
      this.searchVal = ''
      this.$refs.navSearch.value = ''
      this.ajaxGetData(true)
    },
    ajaxGetData (clearOld = false) {
      if (clearOld) {
        this.resetPage()
        this.StandbyStudents = []
      } else {
        this.pageNum++
      }

      this.isLoading = true
      let postData = {
        ...this.calcPageParams,
        params: {
          ...this.searchParams,
          isSignBill: this.curTab,
          ignoreRemind: this.$route.query.complaint
        }
      }
      if (this.searchType) {
        postData.params = { ...postData.params, [this.searchType]: this.searchVal }
      }
      this.$axios.post('/api/clockIn/wait/search', postData)
        .then(res => {
          if (res.data.meta.success) {
            let resData = res.data.data
            this.cbAfterAjax(resData)
            this.StandbyStudents = [...this.StandbyStudents, ...resData.data]
          } else if (!res.data.meta.success && res.data.data) { // 做错误处理
            this.errorRes = res
            this.isShowError = true
          }
        })
    }
  }
}
</script>

<style scoped rel="stylesheet/scss" type="text/scss" lang="scss">
@import "~@/assets/css/public.scss";

.StandbyStudents {
}

.SelfNav {
  /deep/ .left {
    flex: 0;
  }
}

.inp-box {
  flex: 1 3.64rem;
  height: 0.88rem;
  display: flex;
  align-items: center;
  .inp {
    padding: 0.05rem;
    height: 0.52rem;
    overflow: hidden;
    border-radius: 0.05rem;
  }
}

.nav-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .btn-search {
    width: 1.42rem;
    height: 0.5rem;
    line-height: 0.5rem;
    padding: 0;
    background-color: #fff;
    border-radius: 0.1rem;
  }
}

.time-box {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.tab-box {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 7.5rem;
  height: 0.8rem;
  display: flex;
  align-items: center;
  background-color: #7de486;
  .tab-item {
    flex: 1;
    flex-direction: column;
    color: #fff;
    &.active {
      color: #{$c-main};
    }
    &:nth-child(2) {
      border-left: 1px solid #fff;
      border-right: 1px solid #fff;
    }
  }
}
/deep/.van-dialog__header {
  padding-top: 0.1rem;
  background-color: blue;
}
</style>
